<template>
<div>
    <div class="exit" @click="routerLink('subject')">
        <span class="iconfont icon-fanhui"></span>
        <span class="wz">返回</span>
    </div>
 <!-- <div class="iconfont icon-fanhui exit">返回</div> -->
  <div class="article">
    <div class="headerInfo">
      <div class="articleHeader">
        <div class="articleTitle">{{valueData.title}}</div>
        <!-- <div class="solid"></div> -->
        <div class="keyword" v-html="valueData.procucer">
          <!-- <span>关键词</span>
          <span>关键词</span>
          <span>关键词</span> -->
        </div>
        <div class="info">
          <span>{{valueData.created_at | parseTime('{y}-{m}-{d}') }}</span>
          <span>丨</span>
          <span><span class="iconfont icon-see2 see"></span>{{valueData.hit}}</span>
        </div>
      </div>
    </div>
    <div class="articleContent" v-html="valueData.description"> </div>
  </div>
</div>
</template>

<script>
export default {
  filters: {
    parseTime(time, cFormat) {
      if (arguments.length === 0) {
        return null;
      }
      const format = cFormat || "{y}-{m}-{d} {h}:{i}:{s}";
      let date;
      if (typeof time === "object") {
        date = time;
      } else {
        if (typeof time === "string" && /^[0-9]+$/.test(time)) {
          time = parseInt(time);
        }
        if (typeof time === "number" && time.toString().length === 10) {
          time = time * 1000;
        }
        date = new Date(time);
      }
      const formatObj = {
        y: date.getFullYear(),
        m: date.getMonth() + 1,
        d: date.getDate(),
        h: date.getHours(),
        i: date.getMinutes(),
        s: date.getSeconds(),
        a: date.getDay()
      };
      const time_str = format.replace(/{(y|m|d|h|i|s|a)+}/g, (result, key) => {
        let value = formatObj[key];
        // Note: getDay() returns 0 on Sunday
        if (key === "a") {
          return ["日", "一", "二", "三", "四", "五", "六"][value];
        }
        if (result.length > 0 && value < 10) {
          value = "0" + value;
        }
        return value || 0;
      });
      return time_str;
    }
  },
  props: {
    value: {
      type: Object,
      default() {
        return {};
      }
    }
  },
  data() {
    return {
      valueData:{}
    }
  },
  created() {
    if (this.value.title) {
      this.valueData = this.value
      localStorage.setItem("zhuanti", JSON.stringify(this.value));
    }
    const res = localStorage.getItem('zhuanti')
    console.log(JSON.parse(res))
    this.valueData = JSON.parse(res)
  },
   methods: {
    routerLink(name) {
      this.$router.push({name})
    }
  }
};
</script>

<style lang="less">
.exit{
    font-size: 18px;
    background: #F8F8F8;
    padding: 35px;
    color: #333333;
    .wz{
    padding-left: 10px;
    }
}
.article {
    width: 90%;
    margin: 0 auto;
   background: #fff;
  padding-bottom: 30px;
//   border-bottom: 1px solid #e44f50;

  img{
      max-width: 100%;
      height: initial !important;
  }
  .see{
      font-size: 24px;
      vertical-align: sub;
      text-align: center;
  }
  .headerInfo {
    padding-bottom: 35px;
    text-align:left;
    .articleHeader {
      border-bottom: 1px solid #E8E8E8;
      padding: 35px 0 25px;
      .articleTitle {
        font-size: 26px;
      }
      .solid {
        width: 154px;
        height: 1px;
        background: rgba(96, 96, 96, 1);
        // border:1px solid rgba(22,22,22,1);
        margin: 0 auto;
        margin: 25px auto;
      }
      .keyword {
        padding: 0 5px;
        color: #606060;
        font-size: 14px;
      }
      .info {
        padding: 10px 0;
        color: #808080;
        font-size: 14px;
        span {
          padding: 0 10px;
        }
      }
    }
  }
  .articleContent {
    margin: auto;
    // padding-top: 20px;
    // width: 100%;
    // padding: 15px 200px;
    // box-sizing: border-box;
    // text-indent: 24px;
    // img {
    //   width: 100%;
    // }
    // .specific {
    //   width: 100%;
    //   padding: 0 24px;
    // }
  }
}
</style>